<template>
  <el-dialog v-model="dialogVisible" title="打印预览" :width="widtha + 'mm'">
    <div v-loading="loading" id="preview_content_custom"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <!-- <el-button type="primary" @click="print"> 打印</el-button> -->
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
const dialogVisible = ref(false);
const widtha = ref("80");
const loading = ref(false);
const printData = ref(null);
const show = (hiprintTemplate, printData, width) => {
  dialogVisible.value = true;
  loading.value = true;
  widtha.value = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
  setTimeout(() => {
    $("#preview_content_custom").html(hiprintTemplate.getHtml(printData));
    loading.value = false;
  }, 500);
};
const print = () => {
  // 参数: 打印时设置 左偏移量，上偏移量
  let options = { leftOffset: -1, topOffset: -1 };
  // 扩展
  let ext = {
    callback: () => {
      console.log("浏览器打印窗口已打开");
    },
    styleHandler: () => {
      // 重写 文本 打印样式
      return "<style>.hiprint-printElement-text{color:red !important;}</style>";
    },
  };
  // 调用浏览器打印
  hiprintTemplate.print(printData, options, ext);
};
defineExpose({
  show,
});
</script>
